<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../css/userList.css">
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header"><a href="main.html">主页</a> / 用户管理 / 用户列表</div>
</div>
<div class="demoTable">
    用户ID：
    <div class="layui-inline">
        <input class="layui-input" id="id" name="id"  autocomplete="off">
    </div>
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    用户名称：
    <div class="layui-inline">
        <input class="layui-input" id="username" name="username"  autocomplete="off">
    </div>
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    手机号码：
    <div class="layui-inline">
        <input class="layui-input" id="phone" name="phone"  autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="search">搜索</button>
</div>
<table class="layui-hide" id="user" lay-filter="user"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addUser">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="editUser">修改</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delUser">删除</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    var row =null;
    layui.use( ['table','form','laydate'], function(){
        var table = layui.table,
            form = layui.form,
            $ = layui.jquery,
            laydate = layui.laydate;

        table.render({
            elem: '#user'
            ,url:'../user/users'
            ,toolbar: '#toolbarDemo'
            ,defaultToolbar:[]
            ,title: '用户数据表'
            ,cols: [
                [
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true}
                ,{field:'username', title:'用户名', width:120, edit: 'text'}
                ,{field:'password', title:'密码', width:100}
                ,{field:'faceImage',title:'头像',width: 120,templet:function (res) {
                        return '<img src="../'+res.faceImage+'"'+'class="layui-nav-img'+'">'
                    }}
                ,{field:'nickname',title:'昵称',width:120}
                ,{field: 'phone',title: '电话',width:150}
                ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
                        return '<em>'+ res.email +'</em>'
                    }}
                ,{field:'status',title:'状态',width: 120,templet:function (res) {
                        var id = res.id;
                        if (res.status == 1) {
                            return '<input type="checkbox" lay-skin="switch" name="lock" value="' + id + '" lay-text="在线中|已离线" lay-filter="lockDemo" checked >'
                        } else {
                            return '<input type="checkbox" lay-skin="switch" name="lock" value="' + id + '" lay-text="在线中|已离线" lay-filter="lockDemo" >'
                        }
                    }}
                ,{field:'loginTime',title:'上次登录时间'}
            ]
            ]
            ,page: true
        });

        //头工具栏事件
        table.on('toolbar(user)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'addUser':
                    layer.open({
                        type: 2,
                        skin: 'demo-class',
                        maxmin: true,
                        title: "添加用户",
                        area: ["700px", "600px"],
                        content: "../home/addUser",
                        anim:1
                    })
                    break;
                case 'editUser':
                    var data = checkStatus.data;
                    if(data.length===0){
                        layer.msg("请选择需要编辑的行")
                    }else if(data.length>1){
                        layer.msg("只能同时编辑一行")
                    }else{
                        row =data[0];
                        layer.open({
                            type: 2,
                            skin: 'demo-class',
                            maxmin: true,
                            title: "编辑用户信息",
                            area: ["700px", "600px"],
                            content: "../home/editUser",
                            anim:1
                        })
                    }

                    break;
                case 'delUser':
                    var data = checkStatus.data;
                    if(data.length>=1){
                        layer.confirm('真的要删除选中的数据吗？请谨慎操作！', function(index){
                            var ids=[];
                            for(var i=0;i<data.length;i++){
                                ids.push(data[i].id);
                            }
                            $.ajax({
                                type:"DELETE",
                                url:"../user/",
                                dataType:"json",
                                contentType:"application/json",
                                data:JSON.stringify(ids),
                                success:function(res){
                                    table.reload('user')
                                    layer.msg(res.msg)
                                }
                            });
                        });

                    }else {
                        layer.msg("您未选中任何数据！")

                    }
                    break;
            };
        });

        $("#search").on('click', function () {
            //执行重载
            table.reload('user',{
                where:{
                    id:$("#id").val(),
                    username:$("#username").val(),
                    phone:$("#phone").val()
                },
                page:{
                    curr:1
                }
            })
        })
    });
</script>
</body>
</html>